<style lang="less" scoped>

	.dash{
		display: flex;
		flex-direction: column;
    justify-content: center;
    align-items: center;
		color: #fff;
		height: 82vh;
		>h1{
			font-size: 50px;
			>i{
				margin-right: 15px;
			}
			
		}
		>h6{
			color: #eee;
			font-weight: 500;
			margin-top: 10px;
			font-size: 20px;
		}
	}
	
</style>

<template>
	<div class="dash" :style="{'background': `linear-gradient(45deg, ${ Object.keys(grad).map(k=> `rgb(${ grad[k].slice(0,3).join(',')})`).join(',')  } )` }">
		
		<h1><i class="el-icon-location-information" ></i>Welcome</h1>
		<h6>监控台正在建设中...</h6>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				grad:{
					a: [255,255,200,-1],
					b: [185,128,144,1],
					// c: [0,180,190,-1],
					// d: [0,180,190,1],
					// e: [0,180,190,-1]
				}
				
			}
		},
		mounted(){
			this.timer = setInterval(()=> {
				const grad = this.grad;
				Object.keys(grad).forEach( k=> grad[k].slice(0,3).forEach( (v,idx)=> {
					let add = grad[k][3];
					let t = v + add * idx;
					if( t > 255 && add > 0 || t < 90 && add < 0)  add = -1 * add;
					this.$set(grad[k],idx, v + add * idx );
					this.$set(grad[k],3, add );
				}))
			},70 )
		},
		beforeDestroy(){
			clearInterval(this.timer)
		},
		methods:{

		}
	}
	
	
</script>